<template>
  <!--list-->
  <!--@author: 梁凤波-->
  <!--@date  2018/11/22 22:16-->
  <section class="list-wrap">
    <div class="list" v-if="list.length > 0">
      <Table border :columns="columns" :data="list"></Table>
      <div class="page">
        <pagination :page="page" @on-change="fetchData"></pagination>
      </div>

    </div>
    <div class="model">
      <Modal
        v-model="showModel"
        title="提示"
        @on-ok="called(params)">
        <p>{{tipsText}}</p>
      </Modal>
    </div>
  </section>
</template>

<script>
  import {mapState, mapActions} from 'vuex';
  import pagination from '../../components/pagination'

  export default {
    components: {
      pagination
    },
    data() {
      return {
        // 文章ID
        id: '',
        showModel: false,
        tipsText: '',
        // 是否软删除
        is_del: 0,
        list: [],
        page: null,
        pagination: '',
        columns: [
          {
            title: 'ID',
            key: 'id',
            width: 50,
            align: 'center'
          },
          {
            title: '姓名',
            key: 'name',
            width: 110,
          },
          {
            title: '电话',
            key: 'mobile',
            width: 110,
          },
          {
            title: '报考院校',
            key: 'school',
          },
          {
            title: '报考学历',
            key: 'education',
          },
          {
            title: '联系老师',
            key: 'teacher',
          },
          {
            title: '状态',
            key: "status",
            width: 100,
            align: 'center',
            render: (h, params) => {
              var status = '待联系'
              switch (params.row.status){
                case 1: status = '待联系';break;
                case 2: status = '已联系';break;
              }

              return h('div',[
                h('div', {

                }, status)
              ])
            }
          },
          {
            title: '修改时间',
            key: 'updatedAt',
          },
          {
            title: '注册时间',
            key: 'createdAt',
          },
          {
            title: '操作',
            key: 'action',
            width: 300,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.update(params.row);
                    }
                  }
                }, '修改'),
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small',
                    disabled: params.row.status == 2
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.params = params.row;
                      this.showModel = true;
                      this.tipsText = '确定已经联系了吗'

                      // this.update(params.row.id);
                    }
                  }
                }, '更新状态'),
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.params = params.row;
                      this.showModel = true;
                      this.tipsText = '确定要删除吗'

                      // this.update(params.row.id);
                    }
                  }
                }, '删除'),
              ]);
            }
          }
        ],
      }
    },
    computed: {
      ...mapState({})
    },
    created() {
      this.fetchData()
    },
    methods: {
      ...mapActions({
        studentList: 'student/studentList',
        updateStatus: 'student/updateStudent',
        getUserInfo:'user/getUserInfo',
        delStudent:'student/hiddenStudent'
      }),
      // 获取用户列表
      async fetchData(page) {
        try {
          this.pagination = page;
          const ret = await this.studentList({
            page
          });
          this.page = ret.meta;
          this.$Message.success('获取学生列表成功');
          this.list = ret.data;
        } catch (e) {
          this.$Message.error('获取学生列表失败');

        }
      },

      // 改变状态
      async called(params) {
        try {
            if(this.tipsText === '确定要删除吗'){
              await this.delStudent({
              id:params.id,
              is_del: 1
            });
            this.$Message.success('操作成功');
            this.fetchData();
          }else{
            const user = await this.getUserInfo()
            params.status = 2;
            params.teacher = localStorage.username
            await this.updateStatus(params);
            this.$Message.success('操作成功');
            this.fetchData(this.pagination);
          }
        } catch (e) {
          console.log(e);
          this.$Message.error('操作失败');
        }
      },

      update(stu){
        this.$router.push({path:"/student/update/" + stu.id,query:stu});
      }
    }
  }
</script>

<style lang="scss" scoped>
  .page {
    text-align: center;
    padding: 32px 0;
  }
</style>
